import React from 'react';
import TYPE from '../constant/component-type';

export default {
  strategy(props) {
    const { node } = props;
    switch (node.type) {
      case TYPE.TABLE_CELL:
      case TYPE.TABLE_ROW:
        return false;
      default:
        break;
    }
    return true;
  },
  component(props) {
    const { node } = props;
    const { x, y } = node.position;
    const { labelAlign } = node.data;
    const { type } = node;
    let align = 'center';
    switch (labelAlign) {
      case 'top':
        align = 'flex-start';
        break;
      case 'middle':
        align = 'center';
        break;
      case 'bottom':
        align = 'flex-end';
        break;
      default:
        break;
    }
    const { width, height } = node.style;
    let currentheight = 'auto';
    if (type === "textArea") {
      currentheight = '100%';
    } else {
      currentheight = 'auto';
    }
    return (
      <div style={{ position: 'absolute', top: y, left: x, width, height }}>
        <div style={{ display: 'flex', height: currentheight, width: "100%", alignItems: align }}>
          {props.children}
        </div>
      </div>
    );
  },
};
